<template>
	<view class="container">
		<!-- <image src="/static/shop/category.jpeg" mode="aspectFill" class="product-img"></image> -->
		<u-swiper :list="productInfo.imageList" indicator radius="0" height="750rpx" indicatorMode="dot"></u-swiper>
		<view class="product-info">
			<view class="name">{{productInfo.name||''}}</view>
			<view class="spec f-a-center">
				<view class="label">规格</view>
				<view class="value">{{productInfo.attr_name||''}}</view>
			</view>
			<view class="price f-c-between">
				<view class="current w33">¥{{productInfo.price||0}}</view>
				<view class="original w33 f-j-center">市场价
					<view class="underline">¥{{productInfo.market_price||0}}</view>
				</view>
				<view class="payed w33">{{productInfo.sales||0}}人已付款</view>
			</view>
		</view>

		<view class="product-spec">
			<!-- <view class="spec-rows f-a-center" @click="changeSpecPopup">
				<view class="label">选择</view>
				<view class="value f-c-between">
					<view>已选：利翔微生物菌剂 40kg/袋</view>
					<u-icon name="arrow-right" bold size="28rpx" color="#676767"></u-icon>
				</view>
			</view> -->
			<view class="spec-rows f-c-between">
				<view class="label">配送</view>
				<view class="value text-right">{{productInfo.ship_area||''}}免运费</view>
			</view>
		</view>

		<view class="product-detail">
			<view class="title">商品详情</view>
			<view class="pic-list">
				<u-parse :content="productInfo.content"></u-parse>
			</view>
		</view>

		<view class="footer-fixed f-c-between">
			<!-- 			<view class="cart-num" @click="goCartPage">
				<u-badge :value="allCartGoodsCount" bgColor="#FF5656" max="99" absolute :offset="[-5,-5]"></u-badge>
				<image src="/static/tab/unSelectCart.png" class="icon-cart"></image>
				<view class="label">购物车</view>
			</view> -->
			<view class="cart-btns f-a-center f-j-end">
				<!-- <button class="btn btn-add" @click="btnAddCart">加入购物车</button> -->
				<button class="btn btn-buy" @click="btnSubmit">立即购买</button>
			</view>
		</view>

		<!-- <productSpec ref="specPopup"></productSpec> -->
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	export default {
		data() {
			return {
				productId: null,
				productInfo: {}
			};
		},
		computed: {
			...mapGetters(['allCartGoodsCount']),
		},
		onLoad({
			id
		}) {
			this.productId = id
			this.getProductInfo()
		},
		methods: {
			//获取商品详情
			getProductInfo() {
				this.$api.get_shop_goodsDetail({
					id: this.productId
				}).then(res => {
					this.productInfo = {
						...res,
						imageList: res?.images?.split(',').map(v => this.$imgUrl(v)).filter(v => v) || []
					}
				})
			},

			//加入购物车
			btnAddCart() {
				this.$store.dispatch('ac_add_cartItem', this.productInfo).then(() => {
					this.$showToast('加入成功')
				})
			},

			//立即购买
			btnSubmit() {
				this.$store.dispatch('ac_directPurchase_join_goodsItem', this.productInfo)
				this.$store.commit('SET_submitType', '2')
				uni.navigateTo({
					url: '/pages/cart/submit'
				})
			},

			//去购物车页面
			goCartPage() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},

			//规格弹框
			changeSpecPopup() {
				this.$refs.specPopup.showSpecPicker = true
			},
		},
	}
</script>

<style>
	page {
		background-color: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 200rpx;
	}

	.product-img {
		width: 750rpx;
		height: 750rpx;
	}

	.product-info {
		padding: 14rpx 24rpx 26rpx;
		background-color: #ffffff;

		.name {
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			word-break: break-all;
		}

		.spec {
			margin-top: 22rpx;

			.label {
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
			}

			.value {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-left: 48rpx;
			}
		}

		.price {
			margin-top: 20rpx;

			.w33 {
				width: 33.3%;
			}

			.current {
				font-weight: 500;
				font-size: 48rpx;
				color: #FF5800;
			}

			.original {
				font-weight: 400;
				// font-size: 26rpx;
				font-size: calc(26rpx * 1.2);
				color: #999999;

				.underline {
					text-decoration: line-through;
					margin-right: 6rpx;
				}
			}

			.payed {
				font-weight: 400;
				// font-size: 26rpx;
				font-size: calc(26rpx * 1.2);
				color: #999999;
				text-align: right;
			}
		}
	}

	.product-spec {
		background: #FFFFFF;
		padding: 24rpx;
		margin-top: 12rpx;

		.spec-rows {
			.label {
				font-weight: 400;
				// font-size: 28rpx;
				font-size: calc(28rpx * 1.2);
				color: #666666;
				margin-right: 40rpx;
			}

			.value {
				flex: 1;
				font-weight: 400;
				// font-size: 28rpx;
				font-size: calc(28rpx * 1.2);
				color: #333333;
			}
		}
	}

	.product-detail {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.title {
			font-weight: 400;
			// font-size: 28rpx;
			font-size: calc(28rpx * 1.2);
			color: #666666;
			padding: 18rpx 0;
			text-align: center;
		}

		.pic-list {
			width: 100%;

			.pic {
				width: 100%;
			}
		}
	}

	.footer-fixed {
		padding: 18rpx 22rpx 18rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		.cart-num {
			position: relative;

			/deep/.u-badge {
				z-index: 9;
			}

			.icon-cart {
				width: 54rpx;
				height: 54rpx;
				display: block;
			}

			.label {
				font-weight: 400;
				font-size: 20rpx;
				color: #909090;
				margin-top: 4rpx;
			}
		}

		.cart-btns {
			flex: 1;

			.btn {
				width: 250rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #FFC046;
				border-radius: 35rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.btn-add {
				background: #FFC046;
			}

			.btn-buy {
				background: #FF5656;
				margin-left: 30rpx;
			}
		}
	}

	.popup-footer {
		position: relative;
	}
</style>